<template>
  <h3>案例：y轴分级背景、双y轴、y轴名称、x轴</h3>
  <code-demo :code="htmlCode" :scriptCode="scriptCode">
    <chart-base
      style="width: 100%; height: 300px"
      :option="option"
    ></chart-base>
  </code-demo>
</template>

<script setup>
import {
  gridContainLabel,
  gridLeft,
  gridRight,
  gridTop,
  gridBottom,
  axisLineColor,
  xAxisLabelColor,
  xAxisLabelFontSize,
  xAxisLabelMargin,
  yAxisLabelColor,
  yAxisLabelFontSize,
  yAxisLabelMargin,
  axisPointerColor,
  nameColor,
  nameFontSize,
  pureColor,
  lineWidth,
  lineCircelSize,
  lineCircelBorderWidth,
  lineCircelBorderColor,
  legendGap,
  legendTop,
} from 'ui-lib/components/chart/style'

const option = {
  grid: {
    containLabel: gridContainLabel,
    left: gridLeft,
    right: gridRight,
    top: gridTop,
    bottom: gridBottom,
  },
  legend: {
    // data: [],
    show: true,
    itemGap: legendGap,
    top: legendTop,
    selectedMode: true,
  },
  tooltip: {
    trigger: 'axis',
  },
  xAxis: {
    type: 'category',
    data: ['2019年一季度', '2019年二季度', '2019年三季度', '2019年四季度'],
    axisTick: {
      show: true,
      alignWithLabel: true,
      lineStyle: {
        color: axisLineColor,
      },
    },
    axisLabel: {
      rotate: 45,
      margin: xAxisLabelMargin,
      color: xAxisLabelColor,
      fontSize: xAxisLabelFontSize,
    },
    axisLine: {
      lineStyle: {
        color: axisLineColor,
      },
    },
    axisPointer: {
      lineStyle: {
        type: 'solid',
        color: axisPointerColor,
      },
    },
  },
  yAxis: [
    {
      type: 'category',
      data: ['保守', '稳健', '适度', '积极', '激进'],
      name: '等级',
      nameTextStyle: {
        color: nameColor,
        fontSize: nameFontSize,
        align: 'right',
        padding: [0, yAxisLabelMargin, 0, 0],
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: axisLineColor,
        },
      },
      axisLabel: {
        color: yAxisLabelColor,
        margin: yAxisLabelMargin,
        fontSize: yAxisLabelFontSize,
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['#D9F1F0', '#B7E4E9', '#FBF2D7', '#F9D4AE', '#FFAEAC'],
        },
      },
    },
    {
      type: 'value',
      data: ['保守', '稳健', '适度', '积极', '激进'],
      name: '系数',
      nameTextStyle: {
        color: nameColor,
        fontSize: nameFontSize,
        align: 'left',
        padding: [0, 0, 0, yAxisLabelMargin],
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: axisLineColor,
        },
      },
      axisLabel: {
        color: yAxisLabelColor,
        margin: yAxisLabelMargin,
        fontSize: yAxisLabelFontSize,
      },
    },
  ],
  series: [
    {
      name: '等级',
      data: ['激进', '积极', '激进', '激进'],
      type: 'line',
      smooth: true,
      symbolSize: lineCircelSize,
      symbol: 'circle',
      itemStyle: {
        borderColor: lineCircelBorderColor,
        color: pureColor.blue,
        borderWidth: lineCircelBorderWidth,
      },
      lineStyle: {
        width: lineWidth,
        color: pureColor.blue,
      },
    },
    {
      name: '系数',
      data: [20, 40, 50, 30],
      yAxisIndex: 1,
      type: 'line',
      smooth: true,
      symbolSize: lineCircelSize,
      symbol: 'circle',
      itemStyle: {
        borderColor: lineCircelBorderColor,
        color: pureColor.orange,
        borderWidth: lineCircelBorderWidth,
      },
      lineStyle: {
        width: lineWidth,
        color: pureColor.orange,
      },
    },
  ],
}

const htmlCode = `<chart-base
  style="width: 100%; height: 300px"
  :option="yCategoryOption"
></chart-base>`

const scriptCode = `import {
  gridContainLabel,
  gridLeft,
  gridRight,
  gridTop,
  gridBottom,
  axisLineColor,
  xAxisLabelColor,
  yAxisLabelColor,
  yAxisLabelMargin,
  axisPointerColor,
  nameColor,
  nameFontSize,
  pureColor,
  lineWidth,
  xAxisLabelMargin,
  lineCircelSize,
  lineCircelBorderWidth,
  lineCircelBorderColor,
} from 'ui-lib/components/chart/style'

const option = {
  grid: {
    containLabel: gridContainLabel,
    left: gridLeft,
    right: gridRight,
    top: gridTop,
    bottom: gridBottom,
  },
  tooltip: {
    trigger: 'axis',
  },
  xAxis: {
    type: 'category',
    data: ['2019年一季度', '2019年二季度', '2019年三季度', '2019年四季度'],
    axisTick: {
      show: true,
      alignWithLabel: true,
      lineStyle: {
        color: axisLineColor,
      },
    },
    axisLabel: {
      rotate: 45,
      margin: xAxisLabelMargin,
      color: xAxisLabelColor,
      fontSize: xAxisLabelFontSize,
    },
    axisLine: {
      lineStyle: {
        color: axisLineColor,
      },
    },
    axisPointer: {
      lineStyle: {
        type: 'solid',
        color: axisPointerColor,
      },
    },
  },
  yAxis: [
    {
      type: 'category',
      data: ['保守', '稳健', '适度', '积极', '激进'],
      name: '等级',
      nameTextStyle: {
        color: nameColor,
        fontSize: nameFontSize,
        align: 'right',
        padding: [0, yAxisLabelMargin, 0, 0],
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: axisLineColor,
        },
      },
      axisLabel: {
        color: yAxisLabelColor,
        margin: yAxisLabelMargin,
        fontSize: yAxisLabelFontSize,
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['#D9F1F0', '#B7E4E9', '#FBF2D7', '#F9D4AE', '#FFAEAC'],
        },
      },
    },
    {
      type: 'value',
      data: ['保守', '稳健', '适度', '积极', '激进'],
      name: '系数',
      nameTextStyle: {
        color: nameColor,
        fontSize: nameFontSize,
        align: 'left',
        padding: [0, 0, 0, yAxisLabelMargin],
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: axisLineColor,
        },
      },
      axisLabel: {
        color: yAxisLabelColor,
        margin: yAxisLabelMargin,
        fontSize: yAxisLabelFontSize,
      },
    },
  ],
  series: [
    {
      name: '等级',
      data: ['激进', '积极', '激进', '激进'],
      type: 'line',
      smooth: true,
      symbolSize: lineCircelSize,
      symbol: 'circle',
      itemStyle: {
        borderColor: lineCircelBorderColor,
        color: pureColor.blue,
        borderWidth: lineCircelBorderWidth,
      },
      lineStyle: {
        width: lineWidth,
        color: pureColor.blue,
      },
    },
    {
      name: '系数',
      data: [20, 40, 50, 30],
      yAxisIndex: 1,
      type: 'line',
      smooth: true,
      symbolSize: lineCircelSize,
      symbol: 'circle',
      itemStyle: {
        borderColor: lineCircelBorderColor,
        color: pureColor.orange,
        borderWidth: lineCircelBorderWidth,
      },
      lineStyle: {
        width: lineWidth,
        color: pureColor.orange,
      },
    },
  ],
}`
</script>
